<template>
  <div class="rightThree">
    <div class="rightThreeLeft">
      <div class="title">
        <div class="titleImg"></div>
        <div>气</div>
      </div>
      <div class="list">
        <div class="item">
          <div id="rightThreeChart1" class="charts-wrap charts-bg1">
            <span class="charts-value">41</span>
          </div>
          <div>
            <p>AQI</p>
          </div>
        </div>
        <div class="item">
          <div id="rightThreeChart2" class="charts-wrap charts-bg2">
            <span class="charts-value">3770<span>个/立方厘米</span></span>
          </div>
          <div>
            <p>负氧离子</p>
          </div>
        </div>
        <div class="item">
          <div id="rightThreeChart3" class="charts-wrap charts-bg3">
            <span class="charts-value">21<span>微克/立方米</span></span>
          </div>
          <div>
            <p>NO</p>
          </div>
        </div>
        <div class="item">
          <div id="rightThreeChart4" class="charts-wrap charts-bg4">
            <span class="charts-value">26<span>微克/立方米</span></span>
          </div>
          <div>
            <p>PM2.5</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.rightThree
  width vw(530)
  height vh(215)
  box-sizing border-box
  padding vw(30)
  background url('/images/right3.png') no-repeat
  background-size cover
  background-size 100% 100%
  .title
    display flex
    padding-bottom vh(10)
    font-size vw(18)
    .titleImg
      width vw(23)
      height vh(23)
      background url('/images/气.png') no-repeat
      background-size cover
      background-size 100% 100%
      margin-right vw(5)
  .list
    display flex
    flex-direction row
    flex-wrap wrap
    .charts-wrap
      text-align center
      margin 0 vw(5)
      width vw(105)
      height vh(105)
      color #45F4F7
      font-size vw(20)
      .charts-value
        margin-top vh(40)
        display inline-block
        span
          font-size vw(12)
          display block
          color rgb(73,101,145)
    .charts-bg1
      font-size vw(35)
      background url('/images/three1.png') no-repeat
      background-size cover
      background-size 100% 100%
    .charts-bg2
      background url('/images/three2.png') no-repeat
      background-size cover
      background-size 100% 100%
    .charts-bg3
      background url('/images/three2.png') no-repeat
      background-size cover
      background-size 100% 100%
    .charts-bg4
      background url('/images/three2.png') no-repeat
      background-size cover
      background-size 100% 100%
    p
      font-size vw(14)
      margin-top vh(10)
      text-align center
</style>